<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../00.插件/babel.min.js"></script>
  <script src="../00.插件/react.development.js"></script>
  <script src="../00.插件/react-dom.development.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">

  class App extends React.Component{
    state={
      student:[
        {
          id:"001",
          name:'wdh',
          hobby:'code',
          age:18
        },
        {
          id:"002",
          name:'wdy',
          hobby:'kiss',
          age:19
        },
        {
          id:"003",
          name:'wyw',
          hobby:'eat',
          age:17
        }
      ]
    }

    render(){
      const {student} =this.state

      return(
        <div>
          <h1>
            学生列表
          </h1>
          <hr/>
          {
            student.map(item => {
              const {id,name,hobby,age} = item
              return <Students key = {id} {...item}/>
            })
          }
        </div>
      )
    }
  }

  class Students extends React.Component{

    render(){
      const {name,age,hobby} = this.props
      return(
        <div>
          <ul>
            <li>姓名：{name}</li>
            <li>年龄：{age}</li>
            <li>爱好：{hobby}</li>
          </ul>
        </div>
      )
    }

  }

  const root = ReactDOM.createRoot(document.getElementById('app'));
  root.render(<App/>)


</script>
</body>
</html>